<template>
	<view class="town">
		<u-navbar title="轻松小镇" bgColor="#ffffff" safeAreaInsetTop :placeholder="true"
			titleStyle="{fontSize: 16px;font-weight: bold;color: #000000;}">
			<view class="u-nav-slot" slot="left"></view>
		</u-navbar>
		<view class="up">
			<view class="banner">
				<u-image src="../../static/img/t-banner.png" width="100%" height="254px"></u-image>
				<view class="f-s banner-btn" @click="toGame"
					v-if="$store.state.userToken !== '' && $store.state.userInfo.mobile !== '13888888888'">
					<view style="position: relative;z-index: 2;">点击进入轻松小镇</view>
				</view>
			</view>
		</view>

		<view class="p-20 down">
			<view class="border-box p-20 flex-no-horizontal block m-b-15">
				<view class="flex-no-horizontal flex-dection-col" v-for="(item, index) in tabYuanList" :key="index"
					@click="toPage(item.fun)">
					<u--image :src="item.img" width="32" height="32" shape="circle"></u--image>
					<view class="f-large bold m-t-5 valueText" v-if="token">
						{{ item.value }}
						<text v-if="item.typeW">万</text>
					</view>
					<view class="f-xxs text-center">{{ item.name }}</view>
				</view>
			</view>
			<!-- 11 <image src="https://cdn3.relaverse.cn/uploads/images/0621/165580466100015a1.jpg" style="width: 338px; height: 641px;" mode=""></image> -->

			<view v-if="shopOpenType == '1'">
				<view class="border-box block m-b-15 no-equipment p-20" v-if="!deviceList.length">
					<view class="m-b-20">
						<view class="f-large bold flex-no-horizontal">
							<text class="m-r-5">轻松养生</text>
							<view @click="onQuestion()">
								<u-icon name="question-circle"></u-icon>
							</view>
						</view>
					</view>
					<view class="f-xs text-center">尚未获得数字孪生道具</view>
					<view class="f-xs text-center m-t-5 m-b-15">请先前往兑换</view>
					<u-button shape="circle" color="#5CC9FF" class="no-equipment-btn m-b-5"
						@click="toPage('example/exchange')">去兑换</u-button>
				</view>
				<view class="border-box block m-b-15 has-equipment p-20" v-else>
					<view class="flex-no-horizontal between has-equipment-title m-b-20">
						<view class="flex-no-horizontal">
							<u-tabs :list="tabList" lineHeight="0" @change="tabChange" inactiveStyle="font-size: 16px;"
								activeStyle="font-weight: bold;font-size: 16px;color:#000000;"
								itemStyle="font-size: 16px;color: rgba(0,0,0,0.35)"></u-tabs>
							<view @click="onQuestion()">
								<u-icon name="question-circle"></u-icon>
							</view>
						</view>
						<!--11 <view>
						<u-button size="mini" shape="circle" v-show="current === 0" @click="toPage('device')">激活道具</u-button>
						<view class="f-xs" v-show="current === 1">累计元气 &nbsp;<text
								class="bold">{{massagerRecord.score_total}}</text></view>
					</view> -->
						<view @click="toPage(current ? 'massage' : 'device?backType=1')"
							v-if="deviceList.length || massageList.length">
							<u-icon name="more-dot-fill" color="rgba(0,0,0,0.35)"></u-icon>
						</view>
					</view>
					<view v-show="current === 0" class="device-list flex-no-horizontal between">
						<!-- 11 <view v-if="deviceList.length"> -->
						<view class="device" v-for="item in deviceList.slice(0, 2)" :key="item.id">
							<view class="img" @click="toDeviceDetail(item.condition, item.id)">
								<view class="tip">LV{{ item.level }}</view>
								<!-- 11 铸造:2 -->
								<image :src="item.gradeImage" class="img-icon"></image>
							</view>
							<view class="text-center m-b-10 m-b-10 f-xs">{{ item.name }}#{{ item.number }}</view>
							<u-button color="#5CC9FF" shape="circle" @click="toReady(item.id)"
								customStyle="width: 196rpx;height: 52rpx;" v-if="item.condition === 1">艾灸</u-button>
							<u-button color="#5CC9FF" shape="circle" @click="toMassage(item.id, 2)"
								customStyle="width: 196rpx;height: 52rpx;" v-else-if="item.condition === 2">
								续期
							</u-button>
							<u-button color="#5CC9FF" shape="circle" @click="toActive(item.id)"
								customStyle="width: 196rpx;height: 52rpx;" v-else>立即激活</u-button>
						</view>
						<!-- 11 </view> -->
						<!-- 11 <view v-else class="noDataImg">
						<u-empty mode="data" text="暂无道具"icon="http://cdn.uviewui.com/uview/empty/data.png">
						</u-empty>
					</view> -->
					</view>
					<view v-show="current === 1">
						<view v-if="massagerRecordList.length">
							<view class="m-b-6 messageItem" v-for="(item, index) in massagerRecordList.slice(0, 4)"
								:key="item.id">
								<view class="between f-base flex-no-horizontal">
									<text>{{ item.hardware_name }}#{{ item.number }}</text>
									<text>+{{ item.score }}</text>
								</view>
								<view class="f-xs m-t-5 grey">{{ item.start_time | dateFormat('day') }} -
									{{ item.end_time | dateFormat('day') }}</view>
							</view>
						</view>
						<view v-else class="noDataImg">
							<u-empty mode="data" text="暂无记录" icon="http://cdn.uviewui.com/uview/empty/data.png">
							</u-empty>
						</view>
					</view>
					<!-- <view class="more flex-no-horizontal" @click="toPage(current?'massage':'device')"
					v-if="deviceList.length || massageList.length">
					<u-icon name="more-dot-fill" color="rgba(0,0,0,0.35)"></u-icon>
				</view> -->
				</view>
			</view>
			<!--  v-if="shopOpenType == '1'" -->
			<view style="padding-bottom: 20rpx;" v-if="shopOpenType == '1'" class="border-box p-20 block m-b-15 stage-property">
				<view class="m-b-20 messageItem" @click="getIfcard(1)">
					<view class="f-large bold between flex-no-horizontal ">
						<text class="m-r-5">元气当铺</text>
						<view>查看全部</view>
					</view>
				</view>
				<u-row>
					<u-col v-for="(item1, index1) in shoppingList.slice(0, 3)" :key="index1" :span="4">
						<view class="flex-dection-col m-b-15 flex-no-horizontal" @click="getIfcard(2, item1.link)">
							<u--image :src="item1.image" width="100" height="100" shape="circle"></u--image>
							<view class="f-s text-center m-t-10">{{ item1.title }}</view>
						</view>
					</u-col>
				</u-row>
			</view>
			<view style="padding-bottom: 20rpx;" class="border-box p-20 block m-b-15 stage-property">
				<view class="stage-property-title m-b-15">
					<view class="f-large bold">轻松道具</view>
				</view>
				<u-row>
					<!-- <uni-swiper-dot class="uni-swiper-dot-box" @clickItem=onClickItem :info="tabPropList" :dotsStyles="dotsStyles" :current="currents" mode="round" field="content">
						<swiper class="swiper-box" @change="onChange" :current="swiperDotIndex">
							<swiper-item v-for="(item,index) in tabPropList" :key="index" class="swiperitem"> -->
					<u-col v-for="(item1, index1) in tabPropList" :key="index1" :span="4">
						<view class="flex-dection-col m-b-15 flex-no-horizontal" @click="toPage(item1.fun)">
							<u--image :src="item1.img" width="58" height="58" shape="circle"></u--image>
							<view class="f-s text-center m-t-10">{{ item1.name }}</view>
						</view>
					</u-col>
					<!--</swiper-item>
						</swiper>
					</uni-swiper-dot> -->
				</u-row>
			</view>
			<u-row justify="space-between" gutter="10">
				<u-col :span="6">
					<view class="border-box p-20 block flex-dection-col flex-no-horizontal">
						<view class="f-large text-center m-b-5">任务中心</view>
						<view class="f-xs grey m-b-20 text-center">完成任务领元石</view>
						<u--image src="../../static/img/town-task.png" class="m-b-15" width="58" height="58"
							shape="circle"></u--image>
						<u-button type="warning" color="#FF8E2A" customStyle="width: 75px" size="small" shape="circle"
							@click="toPage('task')">去完成</u-button>
					</view>
				</u-col>
				<u-col :span="6">
					<view class="border-box p-20 block flex-dection-col flex-no-horizontal">
						<view class="f-large text-center m-b-5">兑换中心</view>
						<view class="f-xs grey m-b-20 text-center">转赠符已上线</view>
						<u--image src="../../static/img/town-convert.png" class="m-b-15" width="58" height="58"
							shape="circle"></u--image>
						<u-button type="success" color="#4ABC5A" customStyle="width: 75px" size="small" shape="circle"
							@click="toPage('convert')">去兑换</u-button>
						<!-- convert -->
					</view>
				</u-col>
			</u-row>
		</view>
		<view @touchmove.stop.prevent="stopRoll" class="stopRoll">
			<view @touchmove.prevent
				:style="airdropShow ? 'height: 100vh; width: 100%; position:fixed; z-index: 999;' : ''">
				<u-popup ref="airdropPopup" bgColor="transparent" :show="airdropShow" round="20"
					:closeOnClickOverlay="true" mode="center">
					<view class="airdropShow" v-if="airdropShow">
						<view class="airdropTitle">
							<view class="title">恭喜您获得空投奖励</view>
							<view class="nameNumber">{{ airdropData.info }}*{{ airdropData.num }}</view>
						</view>
						<view class="airdropImg">
							<u--image :src="airdropData.image_url" width="292rpx" height="292rpx" shape="circle">
							</u--image>
						</view>
						<view class="airdropBtn" @tap="onClear()">
							<view class="btn">{{ airdropData.button }}</view>
						</view>
					</view>
				</u-popup>
			</view>
		</view>
		<!-- 元气硬件引导 -->
		<animation-rule ref="animationRule"></animation-rule>
		<tips-popup :popupShow="ifPopup" :subhead="popupText" :confirmText="ifShowCard ? '去认证' : '去设置'"
			confirmBg="#000000" @popupHide="ifPopup = false" @popupConfirm="goAttest"></tips-popup>
	</view>
</template>

<script>
import { mapState } from 'vuex';
import { userInfoApi } from '../../api/index.js';
import { appShopBanner,shop_open } from '../../api/apiH5.js';
import { deviceListApi, massageRecord } from '@/api/bluetooth.js';
import { special_effects_check, airdrop_tips,user_info } from '../../api/collection.js';
import { ifLoginFun } from '../../utility/weChatLogin.js';
import {userIfSetPasswordApi} from '../../api/collection.js'
	import tipsPopup from '../community/common/currencyPopup.vue'
	import animationRule from './components/animationRule.vue';
	export default {
		components: {
			animationRule,
			tipsPopup
		},
		computed: {
			...mapState({
				user: state => state.userInfo,
				token: state => state.userToken
			})
		},
		data() {
			return {
				shopOpenType: '', //是否展示
				tabList: [{
						name: '轻松养生'
					},
					{
						name: '艾灸记录'
					}
				],
				current: 0,
				deviceList: [],
				massageList: [],
				massagerRecord: {}, //使用记录
				massagerRecordList: [],
				airdropShow: false, //空投弹窗是否显示
				airdropData: {}, //道具空投
				currents: 0,
				swiperDotIndex: 0,
				tabPropList: [{
						name: '转赠符',
						img: '../../static/img/town-symbol.png',
						fun: 'symbol'
					},
					{
						name: '加速卡',
						img: '../../static/img/town-jiasuka.png',
						fun: 'transferCard'
					},
					{
						name: '盲盒',
						img: '../../static/img/town-box.png',
						fun: 'blindBox'
					}
				],
				isShowAttested: false, //未设置密码
				ifShowCard: false, //未实名
				ifPopup: false, //是否显示弹框
				popupText: '', //弹框文案
				shoppingList: [], //商品列表
				userData: {}, //用户数据
				tabYuanList: [],
				dotsStyles: {
					backgroundColor: 'rgb(158, 223, 255)',
					border: '1px rgb(158, 223, 255) solid',
					color: '#fff',
					selectedBackgroundColor: 'rgb(92, 201, 255)',
					selectedBorder: '1px rgb(92, 201, 255) solid'
				}
			};
		},
		mounted() {
			// this.onTabPropList();
		},
		onLoad() {
			if (this.token) {
				this.getUser();
			}
		},
		onShow() {
			if (this.token) {
				this.getDeviceList();
				this.getMassageRecord();
				this.onAirdropTips();
				this.onShopping();
				this.onShopOpenType();
				this.getUser();
				// uni.$on()
			} else {
				this.onTabYuanList();
			}
			this.onUpdateAnimation();
		},
		onPullDownRefresh() {
			if (this.token) {
				this.getUser();
				this.getDeviceList();
				this.getMassageRecord();
				this.onAirdropTips();
				this.initialization();
				this.onShopOpenType();
			}
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 2000);
		},
		methods: {
			//是否展示
			async onShopOpenType() {
				try {
					const res = await shop_open();
					this.shopOpenType = res.data.data;
				} catch (e) {
					console.log(e);
				}
			},
			//弹框跳转
			goAttest() {
				if (this.ifShowCard) {
					uni.navigateTo({
						url: '../user/realName'
					})
					this.initialization();
					return false
				} else if (this.isShowAttested) {
					uni.navigateTo({
						url: '../safe/index'
					})
					this.initialization();
					return false
				}
			},
			//初始化弹框数据
			initialization() {
				this.ifShowCard = false;
				this.ifPopup = false;
				this.popupText = '';
				this.isShowAttested = false;
			},
			//获取是否设置安全密码
			async getIfPassword(e, t) {
				try {
					const res = await userIfSetPasswordApi()
					console.log(112222, res)
					if (res.data.isHasPhoto) {
						this.toShopping(e, t);
						return
					}
					this.popupText = '您还未设置安全密码，请先设置安全密码！'
					this.ifPopup = true;
					this.isShowAttested = !res.data.isHasPhoto
				} catch (e) {
					//TODO handle the exception
					console.log(112222, e)
					uni.hideLoading()
				}
			},

			/**
			 * @param {Object} e 1 首页  2 商品详情页
			 * @param {Stinrg} l 需要跳转的参数
			 */
			toShopping(e, l) {
				// http://activity.relaverse.cn/#/
				// let url = 'http://192.168.3.19:8080/#/';	//当铺本地测试链接
				let url = 'http://activity.relaverse.cn/#/';  //当铺正式链接
				// let url = 'http://test.activity.relaverse.cn/#/' //当铺测试链接
				if (!this.token) {
					uni.showToast({
						title: '您还未登录，请先登录~',
						icon: 'none'
					});
					return
				}
				if (e == 1) {
					url = `${url}yqMallIndex?token=${this.$store.state.collectionToken}`
				}
				if (e == 2) {
					// #ifdef APP-PLUS
					url = `${url}${l}&pageType=1&token=${this.$store.state.collectionToken}`
					// #endif
					// #ifndef APP-PLUS
					url = `${url}${l}&token=${this.$store.state.collectionToken}`
					// #endif
				}
				uni.navigateTo({
					url: `../index/outerChain?url=${url}`
				});
			},
			//获取是否实名
			async getIfcard(e, t) {
				try {
					if (this.userData.idCard != "") {
						this.getIfPassword(e, t);
						return;
					}
					this.popupText = '您还未实名，请先实名！'
					this.ifPopup = true;
					this.ifShowCard = true;
					uni.hideLoading()
				} catch (e) {
					//TODO handle the exception
					uni.hideLoading()
				}
			},
			onTabYuanList() {
				console.log(1111, this.userData);
				let arr = [{
						name: '元气',
						img: '../../static/img/town-vigor.png',
						fun: 'vigor',
						value: this.userData.vigor,
						typeW: false
					},
					{
						name: '元石',
						img: '../../static/img/town-stone.png',
						fun: 'stone',
						value: this.userData.stone,
						typeW: false
					},
					{
						name: '创世种子',
						img: '../../static/img/town-seed.png',
						fun: 'seed',
						value: this.userData.seed,
						typeW: false
					},
					{
						name: '普通种子',
						img: '../../static/img/town-seed1.png',
						fun: 'commonSeed',
						value: this.userData.game_seed,
						typeW: false
					}
				];
				if (this.token) {
					arr.forEach((r, i) => {
						if (r.value >= 1e4) {
							r.value = parseInt(r.value / 1e4);
							r.typeW = true;
						} else {
							return r.value;
						}
					});
				}
				this.tabYuanList = arr;
			},
			onChange(e) {
				this.currents = e.detail.current;
			},
			onClickItem(e) {
				this.swiperDotIndex = e;
			},
			onTabPropList() {
				var data = this.tabPropList;
				var list = [];
				//一次显示3个
				for (var i = 0, len = data.length; i < len; i += 3) {
					list.push(data.slice(i, i + 3));
				}
				this.tabPropList = [];
				for (var j = 0; j < list.length; j++) {
					this.tabPropList.push(list[j]);
				}
				console.log(this.tabPropList);
			},
			//领取空投奖励
			onClear() {
				this.airdropShow = false;
				this.onAirdropTips();
			},
			//商城入口商品
			async onShopping() {
				try {
					const res = await appShopBanner();
					this.shoppingList = res.data.data
				} catch (e) {
					console.log(e);
				}
			},
			//是否有空投
			async onAirdropTips() {
				try {
					const res = await airdrop_tips();
					this.airdropData = res.data.data;
					this.airdropShow = this.airdropData != null;
					console.log(111, this.airdropShow);
				} catch (e) {
					console.log(e);
				}
			},
			//动画引导
			async onUpdateAnimation() {
				// this.$refs.animationRule.onOpen();
				let distinguish = 'townIndexPage';
				try {
					const res = await special_effects_check({
						distinguish: distinguish
					});
					let data = res.data.data;
					let arr = Object.values(data);
					arr.forEach((item, index) => {
						switch (item) {
							case 'town_index_rule':
								let animationName = item;
								this.$refs.animationRule.onOpen(distinguish, animationName);
								break;
							case 'town_index_hardware':
								setTimeout(() => {
									if (this.deviceList.length >= 1) {
										let animationName = item;
										this.$refs.animationRule.onOpen(distinguish, animationName);
									}
								}, 300);

								break;
							default:
								break;
						}
					});
				} catch (e) {
					console.log(e);
				}
			},
			onQuestion() {
				uni.navigateTo({
					url: '/pages/index/outerChain?url=http://api.relaverse.cn/index/Html/individually13?id=12&title=元气硬件使用规则'
				});
			},
			tabChange({
				name,
				rect,
				index
			}) {
				this.current = index;
			},
			toActive(id) {
				if (!ifLoginFun()) return;
				this.toReady(id);
			},
			toDeviceDetail(condition, id) {
				if (!ifLoginFun()) return;
				switch (condition) {
					case 0:
						this.toActive(id);
						break;
					default:
						uni.navigateTo({
							url: `./example/propDetails?id=${id}&type=${condition}`
						});
						break;
				}
			},
			toMassage(id, type) {
				if (!ifLoginFun()) return;
				uni.navigateTo({
					url: `./example/propDetails?id=${id}${type ? '&type=2' : ''}`
				});
			},
			toReady(id) {
				uni.navigateTo({
					url: './ready?id=' + id
				});
			},
			toPage(name) {
				if (!ifLoginFun()) return;
				console.log(44, name);
				uni.navigateTo({
					url: `./${name}`
				});
			},
			tips() {
				if (!ifLoginFun()) return;
				uni.navigateTo({
					url: `./example/components`
				});
			},
			async getUser() {
				try {
					const resUserinfo = await userInfoApi();
					this.userData = resUserinfo.data;
					this.onTabYuanList();
					this.$store.commit('setUserInfo', resUserinfo.data);
				} catch (e) {
					console.log(e);
				}
			},
			toGame() {
				if (!ifLoginFun()) return;
				uni.navigateTo({
					// url: `../collection/otherPage?title=title&url=http://www.sterrenisland.com:7020?acctoken=${this.$store.state.collectionToken}` //游戏测试地址
					url: `../collection/otherPage?title=title&url=http://game.relaverse.cn?acctoken=${this.$store.state.collectionToken}` //游戏正式地址
				});
			},
			//道具列表
			async getDeviceList() {
				try {
					const res = await deviceListApi();
					const now = new Date().getTime();
					res.data.forEach(item => {
						// condition 0. 未激活 1. 已激活 2.已过期
						item.condition = item.expiration_time === 0 ? 0 : item.expiration_time * 1000 > now ?
							1 : 2;
					});
					this.deviceList = res.data;
				} catch (e) {
					console.log(e);
					uni.showToast({
						title: e.message || e.data,
						icon: 'none'
					});
					//TODO handle the exception
				}
			},
			//获取使用记录
			async getMassageRecord() {
				try {
					const res = await massageRecord({
						page: 1,
						size: 4
					});
					this.massagerRecord = res.data;
					this.massagerRecordList = this.massagerRecord.record;
				} catch (e) {
					console.log(e);
					uni.showToast({
						title: e.message,
						icon: 'none'
					});
					//TODO handle the exception
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	::v-deep .uni-swiper-dot {
		// 指示点元素默认样式
		width: 9rpx !important;
		height: 9rpx !important;
	}

	::v-deep .uni-swiper-dot-active {
		// 指示点元素激活（当前选中）状态样式
		width: 30rpx !important;
		height: 8rpx !important;
	}

	.bold-span {
		margin-left: 10rpx;
		font-size: 24rpx;
		font-weight: 300;
	}

	.swiperitem {
		display: flex;
		align-items: center;
	}

	.uni-swiper {
		height: 200rpx;
	}

	.swiper-box {
		margin-top: -20rpx;
	}

	.airdropShow {
		background: #ffffff;
		border-radius: 40rpx;
		width: 500rpx;
		text-align: center;
		padding: 67rpx 54rpx;

		.airdropTitle {
			margin-bottom: 57rpx;

			.title {
				font-size: 28rpx;
				color: #000;
				margin-bottom: 20rpx;
			}

			.nameNumber {
				font-size: 35rpx;
				color: #000;
				font-weight: 700;
			}
		}

		.airdropImg {
			display: flex;
			align-items: center;
			justify-content: center;
			margin-bottom: 53rpx;
		}

		.airdropBtn {
			width: 100%;
			padding: 30rpx 0;
			background: #000;
			border-radius: 50rpx;

			.btn {
				font-size: 28rpx;
				color: #ffffff;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}

	.messageItem:last-child {
		margin-bottom: 0 !important;
	}

	.m-b-6 {
		margin-bottom: 12rpx;
	}

	.noDataImg {
		display: flex;
		justify-content: center;
		width: 100%;
	}

	.town {
		min-height: 100%;
		background-color: #f0f4f7;

		.grey {
			color: #8f9091;
		}

		.up {
			.banner {
				position: relative;

				.banner-btn {
					position: absolute;
					bottom: 116rpx;
					transform: translateX(-50%);
					padding: 20rpx 30rpx;
					color: white;
					border: 1px solid #ffffff;
					border-radius: 40px;
					left: 50%;
					overflow: hidden;

					&::after {
						position: absolute;
						content: '';
						top: 0;
						left: 1px;
						width: 100%;
						height: 100%;
						background: #2b5f4a;
						filter: blur(10px);
					}
				}
			}
		}

		.down {
			margin-top: -100rpx;
			position: relative;
			z-index: 1;

			.no-equipment {
				.no-equipment-btn {
					height: 62rpx;
					width: 300rpx;
					font-size: 24rpx;
				}
			}

			.has-equipment {
				height: 506rpx;
				position: relative;

				::v-deep .u-tabs__wrapper__nav__item:first-child {
					padding-left: 0;
				}

				.has-equipment-title {
					height: 42rpx;
					margin-bottom: 30rpx !important;
				}

				.device-list {
					flex-wrap: wrap;
					margin-top: 70rpx;
				}

				.more {
					justify-content: end;
					position: absolute;
					bottom: 40rpx;
					right: 40rpx;
				}

				.device {
					width: 50%;
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;

					.img {
						position: relative;

						.img-icon {
							width: 148rpx;
							height: 176rpx;
						}

						.tip {
							position: absolute;
							font-size: 10px;
							background: rgba(92, 201, 255, 0.2);
							padding: 4rpx 15rpx;
							border-radius: 20rpx;
							z-index: 1;
							left: -30%;
							top: -10%;
						}
					}
				}
			}
		}

		.block {
			background-color: white;
			border-radius: 20rpx;
			justify-content: space-around;
		}

		.flex-dection-col {
			flex-direction: column;

			.valueText {
				text {
					font-size: 22rpx;
				}
			}
		}
	}
</style>
